<template>
  <div>
    <div class="chartbox">
      <div class='echart-brand'>
        <div id='brand-charts' ref="stockbrands" style='width:96%;height:96%'></div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name:"brand",
    props:['stockBrand','mark'],
    watch:{
      stockBrand(){
        console.log(this.mark)
        this.renderCharts(this.stockBrand);
      }
    },
    methods:{
      renderCharts(data){
        let brandCharts = this.$echarts.init(this.$refs['stockbrands']);
        let option = {
          title:{
            text:this.mark==='in'?'库存品牌分析':'出库品牌分析',
            textStyle: {
              color: '#00dcde',
              fontSize: 16,
            },
            left: 10,
            top: 10
          },
          grid:{
            left:'10%',
            top:'20%',
          },
          xAxis:{
            data:data.brandName,
            axisLabel:{
              color:"#fff",
              fontSize:'13',
              rotate:'35'
            }
          },
          yAxis:{
            axisLabel:{
              color:"#fff",
              fontSize:'14'
            },
            splitLine:{
              lineStyle:{
                color:['rgba(255,255,255,0.2)']
              }
            }
          },
          series:[{
            name:"品牌",
            type:"bar",
            barWidth:'20',
            data:data.storageNum,
            itemStyle:{
              color:'#00dcde'
            }
          }]
        };
        brandCharts.setOption(option)
      }
    }
  }
</script>

